<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" class="swipe">
      <van-swipe-item v-for="(image, index) in imglist" :key="index">
        <img class="swipeImg" :src="image.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航栏布局 -->
    <van-grid :column-num="3" :border="false">
      <van-grid-item icon="photo-o" to="newslist">
        <img class="iconi" src="../../assets/images/menu1.png" alt="">
        <p>新闻资讯</p>
      </van-grid-item>
      <van-grid-item icon="photo-o" to="photo/list">
        <img class="iconi" src="../../assets/images/menu2.png" alt="">
        <p>分享好图</p>
      </van-grid-item>
      <van-grid-item icon="photo-o" to="goods/list">
        <img class="iconi" src="../../assets/images/menu3.png" alt="">
        <p>商品购买</p>
      </van-grid-item>
      <van-grid-item icon="photo-o">
        <img class="iconi" src="../../assets/images/menu4.png" alt="">
        <p>留言反馈</p>
      </van-grid-item>
      <van-grid-item icon="photo-o">
        <img class="iconi" src="../../assets/images/menu5.png" alt="">
        <p>激情视频</p>
      </van-grid-item>
      <van-grid-item icon="photo-o">
        <img class="iconi" src="../../assets/images/menu6.png" alt="">
        <p>联系我们</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  name: '',
  created () {
    this.getSwipe()
  },
  data () {
    return {
      imglist: []
    }
  },
  methods: {
    async getSwipe () {
      var { data: res } = await this.$http.get('api/getlunbo')
      console.log(res)
      this.imglist = res.message
    }
  }
}
</script>

<style lang="less" scoped>
.swipeImg {
  height: 100%;
  width: 100%;
}
.swipe {
  width: 100%;
  height: 200px;
}
.iconi {
  width: 50px;
  height: 50px;
}
</style>
